<template>
  <div class="material-main">
    <el-card shadow="hover" clas="margin-30">
      <div slot="header">
        <!-- 上传按钮 -->
        <el-upload
          ref="upload"
          action="uploadFileOss"
          :on-success="materialUploadSucc"
          multiple
          :limit="2"
          :headers="token"
          :on-exceed="exceedChange()"
        >
          <el-button slot="trigger" size="small" type="primary">上传素材</el-button>

          <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
        </el-upload>

      </div>
      <!-- 把处理过的接口数据在此渲染出来 -->
      <el-row :gutter="20">
        <el-col v-for="item in list" :key="item.id" style="width:20%;ma rgin-bottom:20px;">
          <el-card shadow="nevar">
            <div slot="header">
              <span>创建时间：{{ item.createTime }}</span>
            </div>
            <!-- 要实现预览，所以使用element里面的img插件，previewSrclist为预览属性 -->
            <el-image :preview-src-list="previewSrclist" :src="item.ossUrl" style="width:200px;height:200px;display:block;margin:0 auto;" />
            <el-button type="danger" size="small" @click="deleteMaterialById(item.id)">删除</el-button>

            <!-- card body -->
          </el-card>

        </el-col>
      </el-row>
      <el-pagination
        style="margin-top:10px;text-align:right;"
        :current-page.sync="pagniationParams.start"
        :page-size="pagniationParams.limit"
        :page-sizes="pagniationParams.pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagniationParams.totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>
<script>
import mix from '@/mixins/index'
import { findMaterialByPage, delMaterial } from '@/api/content/material'
export default {
  mixins: [mix],
  data() {
    return {
      list: [],
      previewSrclist: []
    }
  },
  created() {
    this.getMaterialList()
  },
  methods: {
    // 素材上传成功方法
    materialUploadSucc(res) {
      /* console.log(res) */
    },
    exceedChange() {
      /* console.log('超出图片个数') */
    },
    getMaterialList() {
      findMaterialByPage(this.pagniationParams.start, this.pagniationParams.limit).then(res => {
        const { success, data, message } = res
        if (success) {
          this.list = data.rows
          this.pagniationParams.totalNum = data.total
          this.previewSrclist = data.rows.map(ele => ele.ossUrl)
        } else {
          this.$message.error(message)
        }
      })
    },
    deleteMaterialById(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除文章
        delMaterial(id).then(res => {
          const { success, message } = res
          console.log(res)
          if (success) {
            // 刷新数据
            this.getMaterialList()
          } else {
            this.$message.error(message)
          }
        })
      }).catch(() => {
        this.$message.info('你点击了取消！')
      })
    },
    // 页面中最大页码数改变时触发
    handleSizeChange(e) {
      this.start = 1
      this.limit = e
      this.getMaterialList()
    },
    // 页面发生改变触发
    handleCurrentChange(e) {
      this.start = e
      this.getMaterialList()
    }
  }
}
</script>
<style lang="scss" scoped>
.material-main{
  .margin-30{
    margin: 30px;
  }
}
/* .el-card__body{
  padding: 10px;
} */
</style>
